// 库存台账
<template>
  <div class="Ecahars">
    <div style="padding: 15px; background: #f8f8f8">
      <BreadcrumbLayer></BreadcrumbLayer>
    </div>
    <el-row class="photo">
      <el-col :span="8"
        ><div class="PieLayer">
          <PieLayer></PieLayer></div
      ></el-col>
      <el-col :span="8"
        ><div class="BarLayer">
          <BarLayer></BarLayer></div
      ></el-col>
      <el-col :span="8"
        ><div class="TransferLayer">
          <TransferLayer></TransferLayer></div
      ></el-col>
    </el-row>
    <el-row class="table">
      <el-row>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="物品分类">
            <el-select style="width: 150px" v-model="formInline.region" placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="存放地点">
            <el-select style="width: 150px" v-model="formInline.region" placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="物品名称">
            <el-input style="width: 150px" v-model="formInline.user" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button color="#33b686" style="color: white" :icon="Search" type="primary" @click="onSubmit"
              >查询</el-button
            >
            <el-button :icon="Refresh" @click="toggleSelection()">重置</el-button>
            <el-button color="#33b686" style="color: white">导出</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-col> <h3>查询结果列表</h3></el-col>
      <el-row>
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          header-align="center"
        >
          <!-- :header-row-style="tableHeaderCellStyle" :row-class-name="tableRowClassName" -->
          <el-table-column type="selection" width="55" />
          <el-table-column align="center" type="index" label="序号" width="80" />
          <el-table-column align="center" property="id" label="物品编号" width="100" />
          <el-table-column align="center" property="name" label="物品名称" width="100" />
          <el-table-column align="center" property="group" label="物品分类" width="100" />
          <el-table-column align="center" property="type" label="规格型号" width="100" />
          <el-table-column align="center" property="address" label="存放地点" width="120" />
          <el-table-column align="center" property="units" label="计量单位" width="100" />
          <el-table-column align="center" property="price" label="物品单价" width="100" />
          <el-table-column align="center" property="avg" label="平均价" width="100" />
          <el-table-column align="center" property="count" label="存放数量" width="100" />
        </el-table>
      </el-row>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import BreadcrumbLayer from '../../components/box-components/BreadcrumbLayer.vue'
import { ref, reactive } from 'vue'
import { ElTable } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'
import PieLayer from '../../components/box-components/PieLayer.vue'
import BarLayer from '../../components/box-components/BarLayer.vue'
import TransferLayer from '../../components/box-components/TransferLayer.vue'

interface Ecahars {
  id: string
  name: string
  group: string
  type: string
  address: string
  units: string
  price: number
  avg: number
  count: number
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<Ecahars[]>([])
// 取消选择
const toggleSelection = (rows?: Ecahars[]) => {
  console.log('rows:', rows)

  // if (rows) {
  //   rows.forEach(row => {
  //     multipleTableRef.value!.toggleRowSelection(row, undefined)
  //   })
  // } else
  multipleTableRef.value!.clearSelection()
}
const handleSelectionChange = (val: Ecahars[]) => {
  multipleSelection.value = val
  console.log('val:', val)
}
// const tableHeaderCellStyle = rowInedx => {
//   console.log(rowInedx)

//   return { backgroundColor: '#ef5' }
// }
// const tableRowClassName = ({ row, rowIndex }: { row: User; rowIndex: number }) => {
//   if (rowIndex === 0) {
//     return { backgroundColor: '#ef5' }
//   } else if (rowIndex === 1) {
//     return 'success-row'
//   } else if (rowIndex === 3) {
//     return 'success-row'
//   }
//   return ''
// }
const tableData: Ecahars[] = [
  {
    id: 'BS1238581',
    name: '多功能扳手',
    group: '工具类',
    type: 'BS-21332',
    address: '仓库01-1库位',
    units: '个',
    price: 30,
    avg: 28.5,
    count: 80
  },
  {
    id: 'BS1238582',
    name: '多功能扳手',
    group: '工具类',
    type: 'BS-21332',
    address: '仓库01-1库位',
    units: '个',
    price: 30,
    avg: 28.5,
    count: 80
  },
  {
    id: 'BS1238583',
    name: '多功能扳手',
    group: '工具类',
    type: 'BS-21332',
    address: '仓库01-1库位',
    units: '个',
    price: 30,
    avg: 28.5,
    count: 80
  },
  {
    id: 'BS1238583',
    name: '多功能扳手',
    group: '工具类',
    type: 'BS-21332',
    address: '仓库01-1库位',
    units: '个',
    price: 30,
    avg: 28.5,
    count: 80
  },
  {
    id: 'BS1238584',
    name: '多功能扳手',
    group: '工具类',
    type: 'BS-21332',
    address: '仓库01-1库位',
    units: '个',
    price: 30,
    avg: 28.5,
    count: 80
  }
]
// const value1 = ref([])
// const value2 = ref([])
// const value3 = ref([])

// const options = [
//   {
//     value: 'Option1',
//     label: 'Option1'
//   },
//   {
//     value: 'Option2',
//     label: 'Option2'
//   },
//   {
//     value: 'Option3',
//     label: 'Option3'
//   },
//   {
//     value: 'Option4',
//     label: 'Option4'
//   },
//   {
//     value: 'Option5',
//     label: 'Option5'
//   }
// ]
// const input = ref('')
const formInline = reactive({
  user: '',
  region: ''
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

<style scoped lang="scss">
.Ecahars {
  box-sizing: border-box;
  > .el-row {
    box-sizing: border-box;
    > .el-col {
      box-sizing: border-box;
      background: white;
    }
  }
  .photo > .el-col {
    box-sizing: border-box;
    background: white;
    border: 3px solid rgb(248, 248, 248);
  }

  .PieLayer,
  .BarLayer,
  .TransferLayer {
    height: 300px;
  }
  & div {
    padding: 5px;
  }
}
.table {
  background: #fff;
  margin: 0px 10px;
}
</style>
